<template>
	<vCommonPage :type="1" title="医生简介">
		<div slot="customContent" style="width: 100%;height: 100%;">
			<div class="topInputClass">
				<input class="topInput" v-model="keyWords" :placeholder="placeholder" @click="showKeyBoard()" />
				<!-- <el-button class="searchBtn">搜索</el-button> -->
			</div>
			<div class="centerBox">
				<div class="ysjjBoxItem"
					v-for="(item,index) in doctorInfoList.slice((currentPage-1)*pagesize,currentPage*pagesize)">
					<div class="leftBox" @click="showDoctorBox(item)">
						<img class="ysjjImg" :src="item.avatarUrl?item.avatarUrl:imgUrl" />
					</div>
					<div class="rightBox">
						<div class="rightTitle" @click="showDoctorBox(item)">
							<div class="oneTitle">{{item.doctorName}}</div>
							<div class="secTitle">{{item.deptName}}</div>
							<div class="secTitle">{{item.docPost}}</div>
							<div class="thirdTitle">{{item.title}}</div>
						</div>
						<div class="contentText" @click="showDoctorBox(item)">
							{{item.represent}}
						</div>
						<!-- <div class="bottomBtnBox"> -->
						<!-- 							<el-button class="ghBtn" @click="yyGhClick(item,'mzgh')">挂号</el-button>
							<el-button class="yyBtn" @click="yyGhClick(item,'mzyy')">预约</el-button> -->
						<!-- </div> -->
					</div>
				</div>
			</div>
			<transition name="el-fade-in-linear">
				<div class="doctorBox" v-show="doctorDetailShow">
					<div class="tipBoxTopClose el-icon-close" @click="hiddenDoctorDetail()"></div>
					<div class="doctorTopBox">
						<img :src="doctorInfo.avatarUrl?doctorInfo.avatarUrl:imgUrl" class="doctorTopBoxImg" />
						<div class="infoBox">
							<div class="infoItem">
								<span class="infoLeft">姓名：</span>
								<span class="infoRight">{{doctorInfo.doctorName}}</span>
							</div>
							<div class="infoItem">
								<span class="infoLeft">科室：</span>
								<span class="infoRight">{{doctorInfo.deptName}}</span>
							</div>
							<div class="infoItem">
								<span class="infoLeft">职称：</span>
								<span class="infoRight">{{doctorInfo.title}}</span>
							</div>
<!-- 							<div class="infoItem">
								<span class="infoLeft">擅长：</span>
								<span class="infoRight">{{doctorInfo.goodAt}}</span>
							</div> -->
						</div>
					</div>
					<div class="contentClass">
						{{doctorInfo.goodAt}}
					</div>
				</div>
			</transition>
			<vAbcKeyBoard v-if="keyBoardInShow" ref="keyBoard" @closeKeyBoard="closeKeyBoard" @searchData="searchData"
				:inputValue="keyWords" :placeholder="placeholder"></vAbcKeyBoard>
			<div v-show="doctorDetailShow||keyBoardInShow" @click="hiddenDoctorDetail()" class="yiny"></div>
			<div class="bottomBox" style="display: flex; justify-content: space-between;">
				<div style="display: flex;">
					<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
					<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
				</div>
				<div style="display: flex; align-items: center;">
					<el-button type="primary" v-show="totalPage>1"
						:class="totalPage == 1 ? 'huiBottom upPage':'blueBottom upPage'" @click="prePage()">
						上一页
					</el-button>
					<div class="pageBox" v-show="totalPage>1">
						<div class="curentPage">{{currentPage}}</div>
						/
						<div class="totalPage">{{totalPage}}</div>
					</div>
					<el-button type="primary" v-show="totalPage>1"
						:class="totalPage == 1 ? 'huiBottom downPage':'blueBottom downPage'" @click="nextPage()">
						下一页
					</el-button>
				</div>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		doctorByKeyWord,
		getDoctorAll
	} from "@api/apiBox/yyjj"
	export default {
		name: "ysjj",
		data() {
			return {
				keyWords: '',
				doctorInfoList: [],
				currentPage: 1, //初始页
				pagesize: 2, //    每页的数据
				totalPage: 0,
				//医生详情弹窗
				doctorDetailShow: false,
				doctorInfo: {},
				keyBoardInShow: false,
				placeholder: '请输入医生姓名/科室名称拼音首字母',
				imgUrl: require('../../assets/images/yyjj/touxiang.png')
			};
		},
		methods: {
			prePage() {
				if (this.currentPage > 1) {
					this.currentPage--;
				}
			},
			nextPage() {
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
				}
			}, //页码数初始化
			async initPage() {
				let data = {
					data: {
						keyword: this.keyWords,
						// deptId: ''
					},
					that: this
				}
				const res = await doctorByKeyWord(data);
				console.log(res, '医生简介')
				this.doctorInfoList = res.data;
				this.totalPage = parseInt((this.doctorInfoList.length + this.pagesize - 1) / this.pagesize)
				this.currentPage = 1;
			},
			showDoctorBox(item) {
				this.doctorInfo = item;
				this.doctorDetailShow = true;
			},
			hiddenDoctorDetail() {
				this.doctorDetailShow = false;
				this.keyBoardInShow = false;
			},
			closeKeyBoard() {
				this.keyBoardInShow = false;
			},
			//数据查询
			searchData(keyWords) {
				this.keyWords = keyWords;
				this.initPage();
				console.log(this.keyWords)
				this.closeKeyBoard();
			},
			showKeyBoard() {
				this.keyBoardInShow = true;
			},
			yyGhClick(item, type) {
				console.log(item, 'tt', type)
				//存储选择的科室信息
				this.$store.dispatch("yyjj/updateDeptId", item.deptId); //存储科室ID信息
				this.$store.dispatch("yyjj/updateDoctorId", item.doctorId); //存储医生ID信息
				if (type == 'mzgh') {
					this.$router.push({
						name: 'xzskfs',
						query: {
							pageName: type,
							name: '门诊挂号'
						},
					});

				} else if (type == 'mzyy') {
					this.$router.push({
						name: 'xzskfs',
						query: {
							pageName: type,
							name: '门诊预约'
						},
					});

				}
			}
		},
		computed: {},
		components: {},
		mounted() {},
		created() {
			this.initPage();
		}
	};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
	.topInputClass {
		display: flex;
		justify-content: center;
		width: 100%;

	}

	.topInput {
		width: 560px;
		height: 4.375rem;
		display: flex;
		align-items: center;
		line-height: 4.375rem;
		padding: 10px 0px;
		background: #FFFFFF;
		border-radius: 8px;
		border: none;

		font-size: 28px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		margin-left: 5px;
		padding-left: 40px;
	}

	.topInput :active {
		border-radius: 8px;
	}

	input::-webkit-input-placeholder {
		/*WebKit browsers*/

		font-size: 26px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #A5B0BD;

	}

	input::-moz-input-placeholder {
		/*Mozilla Firefox*/

		font-size: 26px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #A5B0BD;

	}

	input::-ms-input-placeholder {
		/*Internet Explorer*/

		font-size: 26px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #A5B0BD;

	}

	.searchBtn {
		width: 150px;
		height: 70px;
		background: #46C349;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		border: none;
		margin-left: 28px;
	}

	.centerBox {
		margin-top: 20px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 10px;
		width: calc(100%-10px*2);

		.ysjjBoxItem {
			padding: 22px;
			width: 938px;
			background: #FFFFFF;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 8px;
			display: flex;
			margin-bottom: 15px;

			.leftBox {
				height: 100%;

				.ysjjImg {
					width: 12.69375rem;
					height: 16.25rem;

				}
			}

			.rightBox {
				width: 738px;
				padding-left: 23px;

				.rightTitle {
					width: 100%;
					display: flex;
					overflow: hidden;
					text-overflow: ellipsis;
					align-items: center;
					flex-wrap: wrap;

					.oneTitle {
						font-size: 32px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #435C7A;
						margin-right: 26px;
					}

					.secTitle {
						font-size: 26px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #A5B0BD;
						margin-right: 34px;
					}

					.thirdTitle {
						font-size: 26px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #A5B0BD;
					}
				}

				.contentText {
					margin-top: 10px;
					font-size: 26px;
					width: 95%;
					display: -webkit-box;
					overflow: hidden;
					-webkit-line-clamp: 3; //块元素显示的文本行数
					-webkit-box-orient: vertical;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #435C7A;
					word-wrap: break-word;
					/*省略号 */
					// white-space: nowrap;
				}

				.bottomBtnBox {
					width: 100%;

					.ghBtn {
						margin-left: 515px;
						width: 100px;
						height: 60px;
						background: #57A8FF;
						box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
						border-radius: 8px;
						font-size: 28px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}

					.yyBtn {
						margin-left: 20px;
						width: 100px;
						height: 60px;
						background: #46C349;
						box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
						border-radius: 8px;
						font-size: 28px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}

				}
			}

		}

		.centerItem {
			margin: 10px;
			width: 432px;
			padding: 24px;
			height: 217px;
			background: #FFFFFF;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 8px;
			display: flex;

			.centerImg {
				width: 155px;
				height: 100%;
			}

			.centerRightBox {
				height: 100%;
				margin-left: 20px;

				.centerRightBoxName {
					font-size: 32px;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #435C7A;

				}

				.centerRightBoxOther {
					font-size: 26px;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #A5B0BD;
				}

				.centerRightContent {
					margin-top: 5px;
					font-size: 26px;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #435C7A;
					width: 273px;
					height: 120px;
					overflow: hidden;
					text-overflow: ellipsis; //显示省略号
					display: -webkit-box;
					-webkit-line-clamp: 3; //块元素显示的文本行数
					-webkit-box-orient: vertical;
				}

				.bottomBtnBox {
					width: 100%;
					display: flex;

					.ghBtn {
						margin-left: 515px;
						width: 100px;
						height: 60px;
						background: #57A8FF;
						box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
						border-radius: 8px;
						font-size: 28px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}

					.yyBtn {
						margin-left: 20px;
						width: 100px;
						height: 60px;
						background: #46C349;
						box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
						border-radius: 8px;
						font-size: 28px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}

				}
			}
		}
	}

	.doctorBox {
		position: fixed;
		bottom: 9.375rem;
		width: 790px;
		height: 578px;
		background: #FFFFFF;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
		left: calc(50% - 435px);
		z-index: 3;
		padding: 40px;
		overflow-y: auto;

		.contentClass {
			width: 100%;
			overflow: auto;
			height: 275px;
			font-size: 26px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #435C7A;
			margin-top: 29px;
			text-indent: 2em;
			word-wrap: break-word;
			overflow: hidden;
		}

		.tipBoxTopClose {
			position: absolute;
			right: 0px;
			top: 0px;
			width: 50px;
			height: 50px;
			background: #57A8FF;
			border-radius: 6px;
			font-size: 30px;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.doctorTopBox {
			width: 100%;
			display: flex;
			margin-top: 30px;

			.doctorTopBoxImg {
				width: 14.6875rem;
				height: 14.375rem;
				padding-top: 10px;
			}

			.infoBox {
				width: calc(100% - 15rem);
				margin-left: 34px;
				.infoItem {
					margin-bottom: 6px;
					.infoLeft {
						font-size: 32px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #A1ADBB;
					}

					.infoRight {
						font-size: 32px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #435C7A;
						word-wrap: break-word;
					}
				}


			}
		}
	}
</style>
